<template>
<div>
<Modal
	v-model="show"
	title="还款记录"
	:width="1000"
	>
	<div>
		<Form :model="info" :label-width="150" style="width: 100%" :rules="ruleValidate" ref="from1">
			<Row>
				<Col span="11">
					<FormItem label="月份：" prop="date_month">
						<Input :value="info.date_month" disabled placeholder="请输入关键词" class="defwid"></Input>
					</FormItem>
					<FormItem label=" 日期：" prop="date">
						<DatePicker :value="info.date" type="date" placeholder="请选择日期" class="defwid" :options="options3" @on-change="date_change"></DatePicker>
					</FormItem>
					<FormItem label="备注：">
						<Input type="textarea" :rows="4" v-model="info.info" placeholder="" class="defwid"></Input>
					</FormItem>
					<FormItem label="币种：" prop="bz">
						<currency_list v-model="info.bz" field="name" class="defwid"></currency_list>
					</FormItem>
					<FormItem label="金额：" prop="money">
						<Input v-model="info.money" placeholder="" class="defwid"></Input>
					</FormItem>
					<FormItem label="还款人：" prop="user_id">
						<user_filter v-model="info.user_id"  class="defwid"></user_filter>
					</FormItem>
				</Col>
				<Col span="13">
					<ul class="u2966_ul">
						<li v-for="(item,index) in list" :key="index">
							<img class="u2966_img" src="../../../assets/images/u2966.png">
							<span>{{item.date}}&nbsp;&nbsp;&nbsp;还款￥{{item.income}}&nbsp;&nbsp;&nbsp;还款人：{{item.username}}&nbsp;&nbsp;&nbsp;备注：{{item.info}}</span>
						</li>
					</ul>
				</Col>
			</Row>
		</Form>
	</div>
	<div slot="footer" style="text-align: center;">
		<Button type="success" style="width:100px;"  @click="handleSubmit('from1')">提交</Button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<Button type="success" style="width:100px;"  @click="import_entry">引入记账</Button>
	</div>
</Modal>


	<!-- 引入记账 -->
	<Modal
        v-model="imports.rzShow"
        title="引入资产"
		:width="1000"
        >
        <div>
		<Form :model="filter" :label-width="150" style="width: 100%;padding: 30px 0px 90px;">
			<Row>
				<Col span="12">
					<FormItem label="导入时间范围：" prop="month">
						<DatePicker @on-change="handleDate" :value="filter.date" type="daterange" placement="bottom-end" placeholder="Select date" style="width: 200px"></DatePicker>
					</FormItem>
				</Col>
			</Row>
			<Row>
				<Col span="12">
					<FormItem label=" 类型：">
						<Select v-model="filter.type" placeholder="请选择类型" style="width: 240px" class="defwid">
							<Option value="0" >现金</Option>
							<Option value="1" >银行</Option>
							<Option value="2" >其他</Option>
							<Option value="all" >全部</Option>
						</Select>
					</FormItem>
				</Col>
				<Col span="12">
					<FormItem label=" 承担部门：">
						<bumen_filter v-model="filter.bumen" field="name" style="width:150px;"></bumen_filter>
					</FormItem>
				</Col>
			</Row>
			<Row>
				<Col span="12">
					<FormItem label="公司主体：">
						<company_list v-model="filter.company" field="sx_name" style="width:150px;"></company_list>
					</FormItem>
				</Col>
				<Col span="12">
					<FormItem label="费用科目：">
						<Input :value="filter.subject" field="name" disabled class="defwid"></Input>
					</FormItem>
				</Col>
			</Row>
			<!--Row>
				<Col span="12">
					<FormItem label="地区：">
						<region_list v-model="filter.region" field="name" style="width:150px;"></region_list>
					</FormItem>
				</Col>
			</Row-->
			
		</Form>
	</div>
	<div slot="footer" style="text-align: center;">
		<Button type="success" size="large"  @click="import_data">搜索</Button>
	</div>
    </Modal>

    <!-- 搜索的记账列表 -->
	<Modal
        v-model="imports.listrzShow"
        title="引入资产列表"
		:width="1000"
        >
        <div class="g_box_con">
			<Table :loading="loading" :columns="Columns" :data="importList" style="width: 100%;"  size="small" :border="true" ref="table">
				<div slot="footer" style="border-top: 1px solid #eee;padding: 0 10px; text-align: right;    font-size: 14px;">
					<div style="float:right;">
						<Page :total="info.count" show-elevator show-total @on-change="goto_page" />
					</div>
				</div>
			</Table>
		</div>
	<div slot="footer" style="text-align: center;">
		<Button type="success" size="large"  @click="import_ok">导入</Button>
	</div>
    </Modal>

</div>
</template>

<script>
import currency_list from '@/themes/components/currency_filter';
import user_filter from '@/themes/components/user_filter';

import region_list from '@/themes/components/region_list';
import company_list from '@/themes/components/company_list';
import bumen_filter from '@/themes/components/bumen_filter';
import subject_filter from '@/themes/components/subject_filter';


export default {
  name: 'moneyinfo_bar',
  components:{
	currency_list,
	user_filter,
	region_list,
	company_list,
	bumen_filter,
	subject_filter,
  },
  data(){
	var self = this;
	return {
		options3: {
			disabledDate (date) {
				
				var ls_date = new Date(self.date_month+'-01');
				return date && date.valueOf() < ls_date.valueOf()-86400000 ;
			}
		},
		show:false,
		loading:false,
		info:{
			date_month:'',
			date:'',
			info:'',
			bz:'人民币',
			money:0,
			user_id:0
		},
		ruleValidate:{
			date_month:[
				{ required: true, message: '请选择月份', trigger: 'blur' }
			],
			date:[
				{ required: true, message: '请选择日期', trigger: 'blur' }
			],
			bz:[
				{ required: true, message: '请选择币种', trigger: 'blur' }
			],
			money:[
				{ required: true, message: '请填写金额', trigger: 'blur' }
			],
			user_id:[
				{ required: true, message: '请选择员工', trigger: 'blur' }
			],
		},
		imports:{
			show:false,
			rzShow:false,
			mark:'',
			company_id:0,
			listrzShow:false
		},
		companyList:[],
		id:0,
		list:[],
		importList:[],
		filter:{
				date:[new Date().Format('yyyy-MM-dd'),new Date().Format('yyyy-MM-dd')],
				type:'',
				region:'',
				company:'',
				bumen:'',
				subject:'',
				//subject:'1031其他应收款/借支',
			},
		Columns: [
				{
					type: 'selection',
					width: 60,
					align: 'center'
				},
				{
					title: '月',
					key: 'month',
					align: 'center',
                    width: 60
                },
				{
                    title: '日',
					key: 'day',
					align: 'center',
					width: 60,
                },
				{
                    title: '摘要',
					key: 'info',
					align: 'center',
                },
				{
                    title: '收入',
					key: 'income',
					align: 'center',
					width: 100,
                },
				{
                    title: '支出',
					key: 'expenses',
					align: 'center',
					width: 100,
                },
				{
                    title: '结余',
					key: 'balance',
					align: 'center',
					width: 80,
                },
				{
                    title: '地区',
					key: 'region',
					align: 'center',
					width: 80,
                },
				{
                    title: '承担部门',
					key: 'bumen',
					align: 'center',
					width: 100,
                },
				{
                    title: '费用科目',
					key: 'subject',
					align: 'center',
					width: 100,
				},
				{
                    title: '凭证编号',
					key: 'certificate',
					align: 'center',
					width: 150,
                },
            ],
	};
  },
  props:['value','cinfo','date_month'],
  created(){
	this.show = this.value;
  },
  watch:{
	value(val){
		if(val){
			
			if(this.cinfo){
				
				
				if(this.cinfo.id){
					this.id = this.cinfo.id;
					this.load_data();
				}
			}
			this.info.date_month = this.date_month;
			
		}
		this.show = val;
	},
	show(val){
		this.$emit('input',val);
	}
  },
  methods: {
	load_data(){
		var self = this;

		var postdata = {
			id:this.id
		};
		
		Whttp.load('Chuna/Jiezhi/get_huan_list',postdata,function(result){
			self.list = result;
		});
	},
	handleSubmit(name) {
		this.$refs[name].validate((valid) => {
			if (valid) {
				this.einfo_ok();
			} 
		})
	},
	handleDate(val) {
  		this.filter.date = val;
	},
	einfo_ok(){
	
		var self = this;

		var postdata = this.info;
		postdata['id'] = this.id;
		postdata['region'] = this.cinfo.region;
		
		if(postdata.money > localStorage.setMaxMoney){
		
			if(confirm('当前输入金额过大，请再检查一遍噢~')){
				Whttp.load('Chuna/Jiezhi/add_huan',postdata,function(result){
					self.show = false;
					self.$Message.info('提交成功');
					self.$emit('success',result);
				});
			}
		}else{
			Whttp.load('Chuna/Jiezhi/add_huan',postdata,function(result){
				self.show = false;
				self.$Message.info('提交成功');
				self.$emit('success',result);
			});
		}
		
	},
	//搜索记账列表
	import_data(){
		var self = this;
		self.show = false;

		self.imports.rzShow = false;
		self.imports.listrzShow = true;

		var postdata = {
				f:this.filter,
				id:this.id,
				page:this.page
			};

		Whttp.load('Chuna/Jiezhi/get_import_list',postdata,function(result){
			self.importList = result.list;
			this.show = false;
			
		});
	},
	//引入记账
	import_entry(){
		this.show = false;

		this.imports.rzShow = true;
	},
	//导入记账
	import_ok(){
		var ids = [];
		var sels = this.$refs['table'].getSelection();

		for(var i=0;i<sels.length;i++){
			ids.push(sels[i].id);
		}

		var self = this;
		var postdata = {
			pid:this.id,
			ids:ids
		};
		Whttp.load('Chuna/jiezhi/import_data',postdata,function(result){
			self.imports.listrzShow = false;
			self.$emit('getMessage',1);
			self.$Message.info('操作成功');
		},function(result){
			alert(result.message);
		});
	},
	date_change(date){
		this.info.date = date;
	},
	goto_page(page){
		this.page = page;
		this.load_data();
	},
  }
}
</script>
<style scoped>
.price{
	color: red;
    margin: 0 5px;
}
.defwid{
	width:220px;
}
.u2966_ul{
	height: 330px;
    overflow-y: scroll;
}
.u2966_ul li{
	position: relative;
	padding: 0 20px 0px 40px;
	line-height: 18px;
	margin-bottom: 20px;
	font-size: 14px;
}
.u2966_img {
	position: absolute;
	top:0;
	left:0;
    border-width: 0px;
    width: 25px;
    height: 25px;
}
</style>